<template>
  <div class="container">
    <div>试卷属性</div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>试卷名称：</div>
        <div>
          <el-input
            v-model="testPaperName"
            placeholder="请输入试卷名称"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row" v-if="testPaperType == '2'">
        <div class="font"><span style="color: red">*</span>首页展示：</div>
        <div>
          <el-select v-model="isHomeShow" placeholder="是否展示在首页">
            <el-option
              v-for="item in showList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>试卷类型：</div>
        <div>
          <el-select v-model="testPaperType" placeholder="请选择试卷类型">
            <el-option
              v-for="item in testTypeList"
              :key="item.id"
              :label="item.testPaperType"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>考试时长（分钟）：
        </div>
        <div>
          <el-input
            v-model="testPaperTime"
            placeholder="请输入考试时长  例：60"
            clearable
            size="small"
          />
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>试卷总分（分）：
        </div>
        <div>
          <el-input
            v-model="testPaperScore"
            placeholder="请输入试卷总分 例：100"
            clearable
            size="small"
          />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>及格分数（分）：
        </div>
        <div>
          <el-input
            v-model="passScore"
            placeholder="请输入及格分数 例：60"
            clearable
            size="small"
          />
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>试卷级别：</div>
        <div>
          <el-select v-model="classType" placeholder="请选择试卷类型">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="font">
          排序：
        </div>
        <div>
          <el-input
            v-model="orderNum"
            placeholder="请输入排序号"
            clearable
            size="small"
          />
        </div>
      </div>
    </div>
    <div>试卷设置</div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>教员试卷：</div>
        <div>
          <el-select v-model="isTeacherTestPaper" placeholder="请选择">
            <el-option
              v-for="item in teacherList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="row">
        <div class="fonts"><span style="color: red">*</span>组卷形式：</div>
        <div>
          <el-select
            v-model="testPaperMethod"
            placeholder="请选择"
            @change="change()"
          >
            <el-option
              v-for="item in typeList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div v-if="testPaperMethod == '1'">
      <div style="margin-left: 90px">
        <el-button @click="downLoadQ()" class="searchBtn">模板下载</el-button>
        <el-button type="primary" @click="upLoadQ()" class="searchBtn"
          >试卷上传</el-button
        >
      </div>
    </div>
    <div>
      <div class="row" v-if="testPaperMethod != '1' && testPaperMethod != ''">
        <div class="font">课程名称：</div>
        <div>
          <el-select
            v-model="course"
            @change="selCourse($event)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in clist"
              :key="item.courseId"
              :label="item.courseName"
              :value="item.courseId"
            ></el-option>
          </el-select>
        </div>
        <div class="fonts">章节名称：</div>
        <div>
          <el-select
            v-model="chapter"
            @change="selChapter($event)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in chapterList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="row" v-if="testPaperMethod == '2'">
        <div class="font">总题数：</div>
        <div style="display: flex">
          <div>
            <el-input
              v-model="testPaperQuestionNum"
              placeholder="请输入总题数:"
              clearable
              size="small"
            />
          </div>
        </div>
        <div class="font">百分比：</div>
        <div style="display: flex">
          <div>
            <div class="rows" v-if="testPaperMethod == '2'">
              <el-input
                v-model="percentage"
                placeholder="请输入百分比:"
                clearable
                size="small"
              /><span style="position: relative; top: 8px; left: 10px">%</span>
            </div>
          </div>
          <el-button style="margin-left: 20px" @click="addPer()"
            >添加</el-button
          >
          <el-button
            type="danger"
            style="margin-left: 20px"
            @click="clearPer()"
            v-if="isClear"
            >清空表格</el-button
          >
        </div>
      </div>
      <div class="row" v-if="testPaperMethod == '0'">
        <div class="font">单选题：</div>
        <div style="display: flex">
          <div>
            <el-input
              v-model="singleNum"
              placeholder="请输入单选题数:"
              clearable
              size="small"
            />
          </div>
          <div v-if="testPaperMethod == '0'">
            （共<span style="color: red">{{ singleNumTotal }}</span
            >题单选）
          </div>
        </div>
        <div class="font">多选题：</div>
        <div style="display: flex">
          <div>
            <el-input
              v-if="testPaperMethod == '0'"
              v-model="multipleNum"
              placeholder="请输入多选题数:"
              clearable
              size="small"
            />
          </div>
          <div v-if="testPaperMethod == '0'">
            （共<span style="color: red">{{ multipleNumTotal }}</span
            >题多选）
          </div>
        </div>
      </div>
      <div class="row" v-if="testPaperMethod == '0'">
        <div class="font">判断题：</div>
        <div style="display: flex">
          <div>
            <el-input
              v-if="testPaperMethod == '0'"
              v-model="trueFalseNum"
              placeholder="请输入判断题数:"
              clearable
              size="small"
            />
          </div>
          <div v-if="testPaperMethod == '0'">
            （共<span style="color: red">{{ trueFalseNumTotal }}</span
            >题判断）
          </div>
        </div>
        <el-button style="margin-left: 20px" @click="add()">添加</el-button>
        <el-button
          type="danger"
          style="margin-left: 20px"
          @click="clear()"
          v-if="isClear"
          >清空表格</el-button
        >
      </div>
      <el-table
        v-if="testPaperMethod == '0'"
        class="listTable"
        :data="chapterInfo"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="序号" prop="id" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="章节名称">
          <template slot-scope="{ row }">
            <span>{{ row.chapterId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单选题数" width="160" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.singleNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="多选题数" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.multipleNum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="判断题数" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.trueFalseNum }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index + 1)"
              v-hasPermi="['financeProduct:product:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="testPaperMethod == '2'"
        class="listTable"
        :data="chapterInfoPer"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="序号" prop="id" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="章节名称">
          <template slot-scope="{ row }">
            <span>{{ row.chapterId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="百分比（%）" width="160" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.percentage }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeletePer(scope.$index + 1)"
              v-hasPermi="['financeProduct:product:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
      <el-button type="primary" v-if="testPaperMethod != '2'" @click="submit()"
        >提交</el-button
      >
      <el-button type="primary" v-else @click="submitPer()">提交</el-button>
    </div>
    <el-dialog :visible.sync="uploadMenu" width="648px" height="450px">
      <div class="footers">
        <label for="fileExport" class="uploadBtn">上传名单</label>
        <input
          type="file"
          id="fileExport"
          @change="handleFileChanges_1"
          ref="inputers_1"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  chapterLIst,
  testSubmit,
  downLoadQ,
  testImport,
  chapterTypeNum,
  getTypeList,
  courseList,
} from "@/api/system/user";
export default {
  components: {},
  data() {
    return {
      classType: '',
      orderNum: '',
      testPaperName: "",
      // courseName: '',
      testPaperType: "",
      testPaperTime: "",
      testPaperScore: "",
      passScore: "",
      testPaperMethod: "",
      isTeacherTestPaper: "",
      testFullUrl: "",
      levelList: [
        { key: "0", value: "消防设施操作员基础知识" },
        { key: "1", value: "消防设施操作员初级" },
        { key: "4", value: "消防设施操作员中级（监控方向）" },
        { key: "5", value: "消防设施操作员高级（监控方向）" },
        { key: "6", value: "消防设施操作员中级（维保方向）" },
        { key: "7", value: "消防设施操作员高级（维保方向）" },
      ],
      typeList: [
        { key: "0", value: "随机(题目数)" },
        { key: "2", value: "随机(百分比)" },
        { key: "1", value: "人工" },
      ],
      teacherList: [
        { key: "0", value: "是" },
        { key: "1", value: "非" },
      ],
      testTypeList: [
        // { key: "4", value: "学前测试" },
        // { key: "5", value: "日常练习" },
        // { key: "1", value: "课后作业" },
        // { key: "2", value: "押题模考" },
        // { key: "3", value: "结业考试" },
      ],
      showList: [
        { key: "1", value: "是" },
        { key: "0", value: "否" },
      ],
      isHomeShow: "",
      chapterList: [],
      chapter: "",
      singleNum: "",
      multipleNum: "",
      trueFalseNum: "",
      isClear: false,
      chapterInfo: [],
      chapterInfoPer: [],
      chapterInfoPers: [],
      uploadMenu: false,
      multipleNumTotal: 0,
      singleNumTotal: 0,
      trueFalseNumTotal: 0,
      clist: [],
      course: "",
      chapterInfos: [],
      testPaperQuestionNum: "",
      percentage: "",
    };
  },
  created() {
    this.getCourseList();
    // this.getChapterList()
  },
  mounted() {
    this.getTypeList(1)
  },
  methods: {
    getTypeList(page) {
      let params = {
        pageNum: page,
      };
      getTypeList(params).then((res) => {
        if (res.code == 200) {
          this.testTypeList = res.rows;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    change() {
      this.chapterInfo = [];
      this.chapterInfos = [];
      this.chapterInfoPer = [];
      this.chapterInfoPers = [];
      this.singleNum = "";
      this.multipleNum = "";
      this.trueFalseNum = "";
      this.course = "";
      this.chapter = "";
      this.testFullUrl = "";
    },
    getCourseList() {
      courseList().then((res) => {
        if (res.code == "200") {
          this.clist = res.rows;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    selCourse(val) {
      chapterLIst(val).then((res) => {
        if (res.code == "200") {
          this.chapter = "";
          this.chapterList = [];
          res.data.forEach((element) => {
            let temp = {
              key: element.id,
              value: element.chapter,
            };
            this.chapterList.push(temp);
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    selChapter(val) {
      chapterTypeNum(val).then((res) => {
        if (res.code == 200) {
          this.multipleNumTotal = res.data.multipleNum;
          this.singleNumTotal = res.data.singleNum;
          this.trueFalseNumTotal = res.data.trueFalseNum;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    upLoadQ() {
      this.uploadMenu = true;
    },
    //上传模板
    handleFileChanges_1(e) {
      let inputDOM = this.$refs.inputers_1;
      this.file = inputDOM.files[0]; // 通过DOM取文件数据
      this.formData = new FormData(); //new一个formData事件
      this.formData.append("file", this.file); //将file属性添加到formData里
      // this.formData.append("chapterId	",this.id);
      //此时formData就是我们要向后台传的参数了
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
      testImport(this.formData).then((res) => {
        this.loading.close();
        e.srcElement.value = "";
        if (res.code == 200) {
          this.uploadMenu = false;
          this.$message({ message: "上传成功", type: "success" });
          this.testFullUrl = res.data.data.testFullUrl;
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    //模板下载
    downLoadQ() {
      downLoadQ().then((res) => {
        let blod = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blod, "消联答题试卷上传模板");
        } else {
          const link = document.createElement("a");
          document.body.appendChild(link);
          link.style = "display:none";
          link.href = window.URL.createObjectURL(blod);
          link.download = "消联答题试卷上传模板";
          link.click();
          link.remove();
          window.URL.revokeObjectURL(url);
        }
      });
    },
    addPer() {
      if (!this.chapter) {
        return this.$message({ message: "请选择章节名称", type: "error" });
      }
      if (!this.testPaperQuestionNum) {
        return this.$message({ message: "请输入总题数", type: "error" });
      }
      if (!this.percentage) {
        return this.$message({ message: "请输入百分比", type: "error" });
      }
      this.isClear = true;
      var chapterName = "";
      this.chapterList.forEach((element) => {
        if (element.key == this.chapter) {
          chapterName = element.value;
        }
      });
      let temp = {
        chapterId: chapterName,
        percentage: this.percentage,
      };
      let temps = {
        chapterId: this.chapter,
        percentage: this.percentage,
      };
      this.chapterInfoPer.push(temp);
      this.chapterInfoPers.push(temps);
    },
    add() {
      if (!this.chapter) {
        return this.$message({ message: "请选择章节名称", type: "error" });
      }
      if (!this.singleNum) {
        return this.$message({ message: "请输入单选题数", type: "error" });
      }
      if (!this.multipleNum) {
        return this.$message({ message: "请输入多选题数", type: "error" });
      }
      if (!this.trueFalseNum) {
        return this.$message({ message: "请输入判断题数", type: "error" });
      }
      this.isClear = true;
      var chapterName = "";
      this.chapterList.forEach((element) => {
        if (element.key == this.chapter) {
          chapterName = element.value;
        }
      });
      let temp = {
        chapterId: chapterName,
        singleNum: this.singleNum,
        multipleNum: this.multipleNum,
        trueFalseNum: this.trueFalseNum,
      };
      let temps = {
        chapterId: this.chapter,
        singleNum: this.singleNum,
        multipleNum: this.multipleNum,
        trueFalseNum: this.trueFalseNum,
      };
      this.chapterInfo.push(temp);
      this.chapterInfos.push(temps);
      this.chapter = "";
      this.singleNum = "";
      this.multipleNum = "";
      this.trueFalseNum = "";
    },
    submitPer() {
      let params = {
        isHomeShow: this.isHomeShow,
        testPaperName: this.testPaperName,
        // courseName: this.courseName,
        testPaperType: this.testPaperType,
        testPaperTime: this.testPaperTime,
        testPaperScore: this.testPaperScore,
        passScore: this.passScore,
        testPaperMethod: this.testPaperMethod,
        isTeacherTestPaper: this.isTeacherTestPaper,
        chapterInfo: this.chapterInfoPers,
        testFullUrl: this.testFullUrl,
        testPaperQuestionNum: this.testPaperQuestionNum,
        orderNum: this.orderNum
      };
      testSubmit(params).then((res) => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push("examination");
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    submit() {
      let params = {
        isHomeShow: this.isHomeShow,
        testPaperName: this.testPaperName,
        // courseName: this.courseName,
        testPaperType: this.testPaperType,
        testPaperTime: this.testPaperTime,
        testPaperScore: this.testPaperScore,
        passScore: this.passScore,
        testPaperMethod: this.testPaperMethod,
        isTeacherTestPaper: this.isTeacherTestPaper,
        chapterInfo: this.chapterInfos,
        testFullUrl: this.testFullUrl,
        classType: this.classType,
        orderNum: this.orderNum
      };
      testSubmit(params).then((res) => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push("examination");
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleDelete(id) {
      this.chapterInfo.remove(id - 1);
      this.chapterInfos.remove(id - 1);
    },
    handleDeletePer(id) {
      this.chapterInfoPer.remove(id - 1);
      this.chapterInfoPers.remove(id - 1);
    },
    back() {
      this.$router.push("examination");
    },
    clearPer() {
      this.$confirm("是否确认清空表格数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.chapterInfoPer = [];
          this.chapterInfoPers = [];
        })
        .catch(() => {});
    },
    clear() {
      this.$confirm("是否确认清空表格数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.chapterInfo = [];
          this.chapterInfos = [];
        })
        .catch(() => {});
    },
    getChapterList() {
      chapterLIst().then((res) => {
        if (res.code == "200") {
          res.rows.forEach((element) => {
            let temp = {
              key: element.id,
              value: element.chapter,
            };
            this.chapterList.push(temp);
          });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
  },
};
</script>
<style scoped>
.container {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
}
.row {
  display: flex;
  padding-bottom: 20px;
}
.rows {
  display: flex;
}
.line {
  height: 1px;
  background: #dcdfe6;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 20px;
}
.row .font {
  width: 200px;
  text-align: right;
  margin-right: 20px;
}
.row .fonts {
  width: 300px;
  text-align: right;
  margin-right: 20px;
}
.flex_row {
  display: flex;
}
.footer {
  text-align: center;
  margin-top: 40px;
}
.ways {
  padding: 6px 20px;
  border: 1px solid #f17817;
  margin-left: 20px;
  color: #f17817;
  cursor: pointer;
}
</style>
